<form class="form-horizontal" #form="ngForm">
  <div class="form-group">
    <label class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="姓名"
             [(ngModel)]="person.name" name="name" #nameBox="ngModel" minlength="2"
             greatByteLength="30"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="nameBox.invalid && (nameBox.dirty || nameBox.touched)">
      至少2个字符，至多15个字符！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">年龄</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="年龄"
             [(ngModel)]="person.age" name="age" #ageBox="ngModel"
             greatNumber="3" max="300"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="ageBox.invalid && (ageBox.dirty || ageBox.touched)">
      只能输入整数，最多三位
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">性别</label>
    <div class="col-sm-10">
      <label class="radio-inline">
        <input type="radio" name="gender" [(ngModel)]="person.gender.male" checked value="male"> 男
      </label>
      <label class="radio-inline">
        <input type="radio" name="gender" [(ngModel)]="person.gender.female" value="female"> 女
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="Email"
             [(ngModel)]="person.email" name="email" #emailBox="ngModel" required
             greatRegexp="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="emailBox.invalid && (emailBox.dirty || emailBox.touched)">
      邮箱格式有误！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">手机号</label>
    <div class="col-sm-10">
      <input class="form-control" placeholder="手机号"
             [(ngModel)]="person.mobile" name="mobile" #mobileBox="ngModel"
             greatMobile
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="mobileBox.invalid && (mobileBox.dirty || mobileBox.touched)">
      手机号格式有误！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">办公电话</label>
    <div class="col-sm-10">
      <input class="form-control" placeholder="办公电话"
             [(ngModel)]="person.phone" name="phone" #phoneBox="ngModel"
             greatMobile
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="phoneBox.invalid && (phoneBox.dirty || phoneBox.touched)">
      电话格式有误！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">薪资</label>
    <div class="col-sm-10">
      <input class="form-control" placeholder="薪资"
             [(ngModel)]="person.salary" name="salary" #salaryBox="ngModel"
             greatNumber="6" scale="2"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="salaryBox.invalid && (salaryBox.dirty || salaryBox.touched)">
      最大允许输入6位数字，其中最多2位小数！
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">地址</label>
    <div class="col-sm-10">
      <textarea class="form-control" rows="3"
                [(ngModel)]="person.address" name="address" #addressBox="ngModel"
                greatByteLength="100"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="addressBox.invalid && (addressBox.dirty || addressBox.touched)">
      地址最多输入50个汉字，或100个英文
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" [disabled]="!form.form.valid">保 存</button>
    </div>
  </div>
</form>
